<?php
require_once '../include/conn.php';
require_once 'header.php';
$h_user = $_GET['user'];
$rsd = $db->get_one("select * from `h_kefu_status` where h_user = '{$h_user}'");
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>聊天窗口</title>
	<link rel="stylesheet" href="/style.css">
	<link rel="stylesheet" href="/iconfont/iconfont.css">
</head>
<body>
	<div class="service">
	    <div class="msg-head text-center">
			<a href="javascript:;" onclick="history.go(-1);"><i class="iconfont iconunie679"></i></a>
			<div class="tha"><?php if($rsd['h_name'] == ''){echo $h_user;}else{echo $rsd['h_name'];} ?></div>
			<div class="thb">（<?php echo $rsd['h_address']; ?> - <?php echo $rsd['h_online']; ?>）</div>
			<div class="reply-on" onclick="replyoc();"><i class="iconfont iconkuaijiehuifu"></i></div>
		</div>
		<div class="msg-box">
			<?php
				$rs1 = $db->get_one("select * from `h_kefu` where h_user = '{$h_user}' and h_actIP = '系统' order by h_addTime desc,id desc limit 1");
				$query = "select * from `h_kefu` where h_user = '{$h_user}' and h_isread = 0 and h_addTime < '{$rs1['h_addTime']}'";
				$result = $db->query($query);
				while($rs2 = $db->fetch_array($result))
				{	
					$setRead = 'update h_kefu set h_isread = 1 where id='.$rs2['id'];
					$db->query($setRead);
				}

				$query = "select * from `h_kefu` where h_user = '{$h_user}' and h_isread = 1 order by h_addTime asc,id asc";
				$result = $db->query($query);
				while($rs_list = $db->fetch_array($result))
				{	
					if($rs_list['h_who'] == 1){
						echo '
							<div class="msg clearfix">
								<div class="img1">
									<img src="/img/user.png" alt="" width="100%">
								</div>
								<div class="img2">
									<img src="/img//kefu.png" alt="" width="100%">
								</div>
								<div class="content">
									<span>' . $rs_list['h_content'] . '</span>
									<div class="indicate left-indicate"></div>
									<div class="indicate right-indicate"></div>
								</div>
							</div>
						';
					}else{
						echo '
							<div class="msg clearfix on">
								<div class="img1">
									<img src="/img/user.png" alt="" width="100%">
								</div>
								<div class="img2">
									<img src="/img//kefu.png" alt="" width="100%">
								</div>
								<div class="content">
									<span>' . $rs_list['h_content'] . '</span>
									<div class="indicate left-indicate"></div>
									<div class="indicate right-indicate"></div>
								</div>
							</div>
						';
					}
				}
				$query = "select * from `h_kefu` where h_user = '{$h_user}' and h_who = 2 and h_isread = 0 order by h_addTime asc,id asc";
				$result = $db->query($query);
				while($rs_list = $db->fetch_array($result))
				{
					echo '
						<div class="msg clearfix on">
							<div class="img1">
								<img src="/img/user.png" alt="" width="100%">
							</div>
							<div class="img2">
								<img src="/img//kefu.png" alt="" width="100%">
							</div>
							<div class="content">
								<span>' . $rs_list['h_content'] . '</span>
								<div class="indicate left-indicate"></div>
								<div class="indicate right-indicate"></div>
							</div>
						</div>
				    ';
				}
			?>
			<p id="msgzone"></p>
		</div>
		<div class="reply off">	
			<?php
			    $query = "select * from `h_kefu_reply` order by h_addTime desc,id desc";
				$result = $db->query($query);
				while($rs_list = $db->fetch_array($result))
				{
					$rid = 'r'.$rs_list['id'];
					echo '<div class="reply-item " onclick="reply(\'' . $rid . '\');" id = "' . $rid . '">' . $rs_list['h_content'] . '</div>';
				}
			?>
        </div>
		<div class="menu clearfix off">
		    <div class="m-box">
				<form>
					<label for="file"><i class="iconfont icontupian"></i></label>
					<input type="file" accept="image/*" id="file" onchange="upload()">
				</form>
		    </div>
			<div class="m-box">
				<div class="mkg">
					<?php if($rsd['h_stop'] == 0){ ?>
						<i class="iconfont iconheimingdan" onclick="mon();"></i>
					<?php }else{ ?>
						<i class="iconfont iconhuiyuan" onclick="moff();"></i>
					<?php } ?>
		        </div>
			</div>
	    </div>
		<div class="msg-post">
			<textarea placeholder="发消息..." id="cont"></textarea>
			<div class="msg-jia" onclick="menu();">
				<i class="iconfont iconjia"></i>
				<i class="iconfont iconchacha off"></i>
		    </div>
			<input type="button" value="发送" onclick="comment();">
		</div>
	</div>
    <script src="/js/jquery.min.js"></script>
    <script src="/layer/layer.js"></script>
    <script>
		var user = '<?php echo $h_user; ?>';
        function comment(){
      		var cont = $('#cont').val();
			if (cont==''){
				$(cont).focus();
				layer.tips('说点什么吧','#cont', {tips:1});
				return false;     
			}
			if (user==''){
				$(cont).focus();
				layer.tips('发送对象不存在，请重试！','#cont', {tips:1});
				return false;     
			}
			$.post('get.php',{cont:cont,user:user},function(msg){
				if (msg == 'ok'){
					$('<div class="msg clearfix on"><div class="img1"><img src="/img/user.png" alt="" width="100%"></div><div class="img2"><img src="/img//kefu.png" alt="" width="100%"></div><div class="content"><span>'+cont+'</span><div class="indicate left-indicate"></div><div class="indicate right-indicate"></div></div></div>').appendTo($('#msgzone'));
					$(".msg-box").scrollTop(99999999);
				}
				if (msg == 'xgm'){
					$('<div class="msg clearfix on"><div class="img1"><img src="/img/user.png" alt="" width="100%"></div><div class="img2"><img src="/img//kefu.png" alt="" width="100%"></div><div class="content"><span>备注名修改成功</span><div class="indicate left-indicate"></div><div class="indicate right-indicate"></div></div></div>').appendTo($('#msgzone'));
					$(".msg-box").scrollTop(99999999);
				}
			});

			document.querySelector("textarea").value = "";
		}
		$(document).keydown(function(event){
			if (event.keyCode == 13) {
				comment();
				event.returnValue = false;
				return false;
			}
		});
		function upload(){
			var formdata=new FormData(); 
			formdata.append("file" , $("#file")[0].files[0]);
			$.ajax({
				type : 'post',
				url : 'admin_img.php?user=<?php echo $h_user; ?>',
				data : formdata,
				cache : false,
				processData : false,
				contentType : false, 
				success : function(json){
					var reg = RegExp(/upload/);
					if(json.match(reg)){
						$('<div class="msg clearfix on"><div class="img1"><img src="/img/user.png" alt="" width="100%"></div><div class="img2"><img src="/img/kefu.png" alt="" width="100%"></div><div class="content"><img src="'+json+'" width="100%"><div class="indicate left-indicate"></div><div class="indicate right-indicate"></div></div></div>').appendTo($('#msgzone'));
						var top=999999999;
						var startTime = new Date().getTime();
						var interval = setInterval(function(){
							if(new Date().getTime() - startTime > 2000){
							clearInterval(interval);
							return;
							}
						$(".msg-box").scrollTop(top++);
						}, 1);
					}else{
						layer.msg(json);
					}	
				}  
			})
		}
		function replyoc(){
			document.querySelector(".reply").classList.toggle("off");
		}
		function reply(rid){
			var rcont =  $("#"+rid+"").html();
			if (user==''){
				$(cont).focus();
				layer.tips('发送对象不存在，请重试！','#cont', {tips:1});
				return false;     
			}
			$.post('get.php',{cont:rcont,user:user},function(msg){
				if (msg == 'ok'){
					$('<div class="msg clearfix on"><div class="img1"><img src="/img/user.png" alt="" width="100%"></div><div class="img2"><img src="/img//kefu.png" alt="" width="100%"></div><div class="content"><span>'+rcont+'</span><div class="indicate left-indicate"></div><div class="indicate right-indicate"></div></div></div>').appendTo($('#msgzone'));
					$(".msg-box").scrollTop(99999999);
				}
			});
			document.querySelector(".reply").classList.add("off"); 
		}
		function mon(){	
			$.post('bin.php',{cont:1,user:user},function(msg){
				if (msg == 'yes'){
					$('<div class="msg clearfix on"><div class="img1"><img src="/img/user.png" alt="" width="100%"></div><div class="img2"><img src="/img//kefu.png" alt="" width="100%"></div><div class="content"><span>此访客已加入黑名单</span><div class="indicate left-indicate"></div><div class="indicate right-indicate"></div></div></div>').appendTo($('#msgzone'));
					$(".msg-box").scrollTop(99999999);
				}
			});
			$(".mkg").load(location.href + " .mkg");
		}
		function moff(){
			$.post('bin.php',{cont:0,user:user},function(msg){
				if (msg == 'no'){
					$('<div class="msg clearfix on"><div class="img1"><img src="/img/user.png" alt="" width="100%"></div><div class="img2"><img src="/img//kefu.png" alt="" width="100%"></div><div class="content"><span>此访客已移出黑名单</span><div class="indicate left-indicate"></div><div class="indicate right-indicate"></div></div></div>').appendTo($('#msgzone'));
					$(".msg-box").scrollTop(99999999);
				}
			});
			$(".mkg").load(location.href + " .mkg");
		}
		function menu(){
			if (user==''){
				$(cont).focus();
				layer.tips('发送对象不存在，请重试！','#cont', {tips:1});
				return false;     
			}
			document.querySelector(".menu").classList.toggle("off");
			document.querySelector(".iconjia").classList.toggle("off");
			document.querySelector(".iconchacha").classList.toggle("off");
		}
		window.onload = function(){
			$(".msg-box").scrollTop(99999999); 	
		}
	</script>
	<script>
		$.ajaxSetup ({ cache: false });
		setInterval(function(){
			var user = '<?php echo $h_user; ?>';
			$.getJSON("data.php",{user:user},function(data){
				var audio = new Audio();
				audio.src = '/msg.mp3' ;
				audio.play();
				$('<div class="msg clearfix"><div class="img1"><img src="/img/user.png" alt="" width="100%"></div><div class="img2"><img src="/img//kefu.png" alt="" width="100%"></div><div class="content"><span>'+data+'</span><div class="indicate left-indicate"></div><div class="indicate right-indicate"></div></div></div>').appendTo($('#msgzone'));
				var top=999999999;
				var startTime = new Date().getTime();
				var interval = setInterval(function(){
					if(new Date().getTime() - startTime > 2000){
					clearInterval(interval);
					return;
					}
				$(".msg-box").scrollTop(top++);
				}, 1);
			});
		}, 1000);
   </script>
</body>
</html>